<template>
    <view class="my-news safe-box">
        <List class="list" :status="status" @scrolltolower="scrolltolower">
            <view class="item" hover-class="hover" v-for="item in list" :key="item._id" @click="toDetail(item._id)">
                <view class="date">
                    <text class="day">{{new Date(item.createTime).getDay()}}</text>
                    <text class="month">{{new Date(item.createTime).getMonth() + 1}}月</text>
                </view>
                <view class="pictures" v-if="item.pictures.length">
                    <u-image width="100%" height="100%" :src="joinDomain(pItem.url)"
                        v-for="(pItem, i) in item.pictures.slice(0,4)" :key="i"
                    ></u-image>
                </view>
                <view class="info">
                    <view class="content two-line-clamp">{{item.content}}</view>
                    <view class="bottom">
                        <text v-if="item.pictures.length > 4" class="note">{{item.pictures.length}}张</text>
                        <text class="note" :class="{danger: item.state===noPass}" v-if="item.state !== pass">{{stateName(item.state)}}</text>
                    </view>
                </view>
            </view>
        </List>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                status: 'loadmore',
                query: {
                    index: 1,
                    size: 20
                },
                list: []
            }
        },
        computed: {
          stateName() {
            return (state) => {
              return this.$store.state.newsState[state]
            }
          },
          noPass() {
            return this.$store.state.newsState.noPass
          },
          pass() {
            return this.$store.state.newsState.pass
          }
        },
        methods: {
            getList() {
                this.$http.get('/news', this.query).then(res => {
                    this.list = [...this.list, ...res.data.records]
                    this.status = res.data.records.length < this.query.size ? 'nomore' : 'loadmore'
                })
            },
            scrolltolower() {
                if (this.status === 'loadmore') {
                    this.status = 'loading'
                    this.query.index++
                    this.getList()
                }
            },
            toDetail(id) {
                this.$nav.to('/pages/my-news/detail', {id}, {
                    delete: (id) => {
                        this.list = this.list.filter((item => item._id !== id))
                    }
                })
            }
        },
        onLoad() {
            this.getList()
        }
    }
</script>

<style lang="scss" scoped>
    .item{
        display: flex;
        margin-bottom: 30rpx;
        .date{
            padding-left: 10rpx;
            padding-right: 20rpx;
            .day{
                font-size: 50rpx;
                font-weight: bold;
            }
        }
        .pictures{
            display: flex;
            flex-wrap: wrap;
            width: 150rpx;
            height: 150rpx;
            view{
                min-width: 50%;
                max-width: 100%;
                flex: 1;
            }
            .u-image{
                width: 100%;
                height: 100%;
            }
        }
        .info{
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 10rpx 20rpx;
            font-size: 26rpx;
            flex: 1;
        }
    }
    .hover{
        background-color: rgba(0, 0, 0, .1);
    }
    .note{
      margin-right: 10rpx;
    }
    .danger{
      color: $uni-color-error;
    }
</style>
